<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '游客中心',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 overflow-auto w-100% h-screen box-border">
    <view style="position: relative">
      <image
        style="position: absolute"
        class="w-100% h-446rpx"
        src="../../static/images/TouristCenter/bg.png"
      ></image>
      <wd-navbar
        style="
          position: absolute;
          top: 0;
          z-index: 999;
          width: 100%;
          height: 44px;
          background: transparent;
        "
      >
        <template #right>
          <view class="flex tab_cont" @click="handleTouristReview">
            <wd-icon class="mr-10rpx" name="edit-1" size="18" color="#6B6B6B" />
            <view>反馈</view>
          </view>
        </template>
      </wd-navbar>
      <view class="bg-#fff w-100% p-10rpx box-border detail-card" style="position: relative">
        <image class="w-108rpx h-4rpx" src="../../static/images/TouristCenter/line.png"></image>
        <view class="m-20rpx">
          <image
            class="w-178rpx h-36rpx"
            src="../../static/images/TouristCenter/scenicspot.png"
          ></image>
        </view>
        <view class="mt-40rpx flex justify-around">
          <view>
            <view>
              <image
                class="w-140rpx h-140rpx"
                src="../../static/images/TouristCenter/scenicspot1.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">鲜食采摘园</view>
            <wd-icon name="caret-down-small" size="28px" color="#ee8d2e"></wd-icon>
          </view>
          <view>
            <view>
              <image
                class="w-140rpx h-140rpx"
                src="../../static/images/TouristCenter/scenicspot2.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">野营乐园</view>
            <wd-icon name="caret-down-small" size="28px" color="#ee8d2e"></wd-icon>
          </view>
          <view>
            <view>
              <image
                class="w-140rpx h-140rpx"
                src="../../static/images/TouristCenter/scenicspot3.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">民俗文化园</view>
            <wd-icon name="caret-down-small" size="28px" color="#ee8d2e"></wd-icon>
          </view>
          <view>
            <view>
              <image
                class="w-140rpx h-140rpx"
                src="../../static/images/TouristCenter/scenicspot4.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">研学趣味园</view>
            <wd-icon name="caret-down-small" size="28px" color="#ee8d2e"></wd-icon>
          </view>
        </view>
        <view class="footer" @click="handleScenicspot">前往查看</view>
        <view class="m-20rpx mt-40rpx">
          <image class="w-178rpx h-36rpx" src="../../static/images/TouristCenter/food.png"></image>
        </view>
        <view class="mt-40rpx flex justify-center">
          <view class="mr-48rpx">
            <view>
              <image
                class="w-260rpx h-260rpx"
                src="../../static/images/TouristCenter/food1.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">特色烤肉</view>
          </view>
          <view>
            <view>
              <image
                class="w-260rpx h-260rpx"
                src="../../static/images/TouristCenter/food2.png"
              ></image>
            </view>
            <view class="mb-8rpx mt-24rpx" style="font-size: 28rpx">陕北抿节</view>
          </view>
        </view>
        <view class="footer" @click="handleFood">前往查看</view>
        <view class="m-20rpx mt-40rpx mb-40rpx">
          <image
            class="w-178rpx h-36rpx"
            src="../../static/images/TouristCenter/homestay.png"
          ></image>
        </view>
        <view
          class="flex justify-between"
          style="padding: 20rpx; margin: 20rpx; margin-bottom: 30rpx; background-color: #f3f3f3"
        >
          <view class="flex">
            <view
              class="fw-550 mr-10rpx flex justify-between"
              style="height: 160rpx; font-size: 28rpx; writing-mode: vertical-lr"
            >
              <view>窑</view>
              <view>洞</view>
              <view>民</view>
              <view>宿</view>
            </view>
            <view
              style="
                height: 160rpx;
                font-size: 26rpx;
                text-align: justify;
                writing-mode: vertical-lr;
              "
            >
              冬暖夏凉，给您家一般的温馨感受，快来体验吧！
            </view>
          </view>
          <view>
            <image
              class="w-160rpx h-160rpx"
              src="../../static/images/TouristCenter/homestay1.png"
            ></image>
            <image
              class="w-186rpx h-160rpx ml-18rpx"
              src="../../static/images/TouristCenter/homestay2.png"
            ></image>
          </view>
        </view>
        <view class="footer" style="margin-bottom: 164rpx" @click="handleHomestay">前往查看</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../service/TouristReview/index'
const handleScenicspot = () => {
  uni.navigateTo({ url: '/pages/TouristCenter/ScenicSpot/index' })
}
const handleFood = () => {
  uni.navigateTo({ url: '/pages/TouristCenter/Food/index' })
}
const handleHomestay = () => {
  uni.navigateTo({ url: '/pages/TouristCenter/Homestay/index' })
}
const handleTouristReview = () => {
  uni.navigateTo({ url: '/pages/TouristReview/index' })
}

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
onLoad(() => {})
</script>

<style scoped>
.detail-card {
  top: 346rpx;
  width: 96%;
  margin-right: 2%;
  margin-bottom: 48%;
  margin-left: 2%;
  text-align: center;
  border-radius: 10px;
}
.footer {
  bottom: 10rpx;
  height: 80rpx;
  margin: 20rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  color: #fff;
  text-align: center;
  background-color: #47a527;
  border-radius: 100rpx;
}
::v-deep .wd-navbar__right--hover {
  background-color: #fff !important;
}
::v-deep .wd-navbar__left--hover {
  background-color: #fff !important;
}
::v-deep .wd-navbar__title {
  font-size: 16px !important;
}
.tab_cont {
  height: 24px;
  padding: 4rpx 16rpx;
  margin-top: 20rpx;
  font-size: 14px;
  line-height: 24px;
  color: #6b6b6b;
  background: #edededad;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 9px;
}
::v-deep .wd-navbar.is-border::after {
  height: 0px !important;
}
::v-deep .wd-navbar {
  background: transparent !important;
}
::v-deep .wd-navbar__right--hover {
  background: transparent !important;
}
</style>
